<template>
  <div class="notifications-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <i class="fas fa-bell" aria-hidden="true"></i>
      <h2>通知中心</h2>
      <p>查看和管理您的所有通知消息</p>
    </div>

    <!-- 通知筛选器 -->
    <div class="notification-filters">
      <el-radio-group v-model="activeFilter" size="small">
        <el-radio-button label="all">全部通知</el-radio-button>
        <el-radio-button label="system">系统通知</el-radio-button>
        <el-radio-button label="course">课程提醒</el-radio-button>
        <el-radio-button label="message">消息通知</el-radio-button>
      </el-radio-group>

      <el-button
        size="small"
        class="mark-all-read"
        @click="markAllAsRead"
        :disabled="!hasUnread"
      >
        全部标为已读
      </el-button>
    </div>

    <!-- 通知列表 -->
    <div class="notifications-list">
      <!-- 系统通知 -->
      <div class="notification-item unread" v-for="(item, index) in filteredNotifications" :key="index">
        <div class="notification-icon">
          <i :class="item.iconClass" aria-hidden="true"></i>
          <span class="unread-dot" v-if="!item.read"></span>
        </div>
        <div class="notification-content">
          <div class="notification-header">
            <h3>{{ item.title }}</h3>
            <span class="notification-time">{{ item.time }}</span>
          </div>
          <p class="notification-text">{{ item.content }}</p>
        </div>
        <div class="notification-actions">
          <el-button
            size="mini"
            @click="markAsRead(item, index)"
            v-if="!item.read"
          >
            标为已读
          </el-button>
          <el-button
            size="mini"
            icon="fas fa-trash-alt"
            @click="deleteNotification(index)"
            class="delete-btn"
          ></el-button>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-if="filteredNotifications.length === 0">
        <i class="fas fa-inbox" aria-hidden="true"></i>
        <p>暂无相关通知</p>
        <el-button size="small" @click="resetFilters">查看全部通知</el-button>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNotifications"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Notifications',
  data() {
    return {
      activeFilter: 'all',
      currentPage: 1,
      pageSize: 10,
      totalNotifications: 0,
      notifications: [
        {
          id: 1,
          type: 'system',
          title: '系统更新通知',
          content: '教学管理系统已完成更新，新增AI作业批改功能，欢迎体验！',
          time: '今天 08:30',
          read: false,
          iconClass: 'fas fa-cog'
        },
        {
          id: 2,
          type: 'course',
          title: '课程即将开始',
          content: '您与李同学的语法课程将在30分钟后开始，请做好准备',
          time: '今天 08:15',
          read: false,
          iconClass: 'fas fa-chalkboard-teacher'
        },
        {
          id: 3,
          type: 'message',
          title: '新消息提醒',
          content: '王同学：老师，明天的课程可以提前15分钟开始吗？',
          time: '昨天 19:45',
          read: false,
          iconClass: 'fas fa-comment'
        },
        {
          id: 4,
          type: 'system',
          title: '账户余额提醒',
          content: '您的课时余额不足10课时，建议及时充值以避免影响课程安排',
          time: '昨天 14:20',
          read: true,
          iconClass: 'fas fa-balance-scale'
        },
        {
          id: 5,
          type: 'course',
          title: '课程取消通知',
          content: '小张同学已取消明天10:00的口语课程，已为您释放该时段',
          time: '2023-06-15',
          read: true,
          iconClass: 'fas fa-calendar-times'
        }
      ]
    }
  },
  computed: {
    filteredNotifications() {
      if (this.activeFilter === 'all') {
        return this.notifications;
      }
      return this.notifications.filter(notification => notification.type === this.activeFilter);
    },
    hasUnread() {
      return this.notifications.some(notification => !notification.read);
    },
    totalNotifications() {
      return this.filteredNotifications.length;
    }
  },
  methods: {
    markAsRead(item, index) {
      item.read = true;
      this.$notify.success('已标为已读');
    },
    markAllAsRead() {
      this.notifications.forEach(notification => {
        notification.read = true;
      });
      this.$notify.success('全部通知已标为已读');
    },
    deleteNotification(index) {
      this.filteredNotifications.splice(index, 1);
      this.$notify.success('通知已删除');
    },
    resetFilters() {
      this.activeFilter = 'all';
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
.notifications-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  margin-bottom: 30px;
  text-align: center;
  padding: 10px 0;
}

.page-header h2 {
  margin: 10px 0;
  font-size: 24px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-header h2 i {
  margin-right: 10px;
  color: #0084ff;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 筛选器样式 */
.notification-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.el-radio-button__inner {
  border-radius: 16px !important;
  padding: 6px 16px;
}

.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 16px 0 0 16px !important;
}

.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 16px 16px 0 !important;
}

.mark-all-read {
  background-color: #f0f7ff;
  color: #0084ff;
  border-color: #e0ecff;
  border-radius: 16px;
}

.mark-all-read:disabled {
  background-color: #f5f5f5;
  color: #999;
  border-color: #e9e9e9;
}

/* 通知列表样式 */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(8, 8, 8, 0.08);
  transition: box-shadow 0.3s ease;
}

.notification-item:hover {
  box-shadow: 0 4px 16px rgba(8, 8, 8, 0.12);
}

.notification-item.unread {
  border-left: 3px solid #0084ff;
}

/* 通知图标 */
.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f0f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
}

.notification-icon i {
  font-size: 18px;
  color: #0084ff;
}

.unread-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff4d4f;
}

/* 通知内容 */
.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.notification-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.notification-text {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 通知操作按钮 */
.notification-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  white-space: nowrap;
}

.notification-actions .el-button {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.delete-btn {
  color: #ff4d4f;
  border-color: #ffccd5;
  background-color: #fff2f2;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(8, 8, 8, 0.08);
}

.empty-state i {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 15px;
}

.empty-state p {
  margin: 0 0 20px 0;
  color: #999;
  font-size: 16px;
}

/* 分页样式 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.el-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-pagination__sizes,
.el-pagination__total {
  color: #666;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .notification-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .notification-header {
    flex-direction: column;
    gap: 5px;
  }

  .notification-header h3 {
    max-width: 100%;
  }

  .notification-actions {
    flex-direction: column;
  }
}
</style>
